<template>
  <view class="container">
	  <view class="invite">
      <view class="qrimg">
        <text class="uni-h6 uni-color-gray"
          >（邀请越多 奖励越多官方q群 859863162）</text
        >
        <tki-qrcode
          class="tki-qrcode"
          :size="320"
          ref="qrcode"
          cid="1"
          :val="downurl"
          :onval="true"
          :loadMake="true"
          :showLoading="true"
        />
      </view>

      <view class="myid">
        <text class="uni-h4">我的邀请码：{{ id }}</text>
      </view>
      <view class="row-btns">
        <u-button @click="copyKefu" size="medium" type="success">复制邀请地址</u-button>
        <u-button @click="copyId" size="medium" type="success">复制邀请码</u-button>
      </view>
    </view>
	 <view class="gap">
      <u-gap height="30" bg-color="#101334"></u-gap>
    </view>
    <!-- 邀请记录  邀请 我的策略-->
    <view class="item-strategy">
      <view class="summary">
        <view class="summary-title row">
          <text>累计奖励</text>
          <text>累计邀请人数</text>
          <text>今日邀请人数</text>
        </view>
        <view class="summary-content row">
          <text>3289.31213</text>
          <text>443</text>
          <text>30</text>
        </view>
		 <view class="gap">
		<u-gap height="0" bg-color="#101334"></u-gap>
		</view>
		<u-button @click="drawMoney" size="medium" type="warning">提现</u-button>
      </view>
    </view>
    
    <view class="gap">
      <u-gap height="30" bg-color="#45506e"></u-gap>
    </view>

    <!-- 邀请 奖励 提现 -->
    <view class="tab">
      <u-tabs
        :list="tabs"
        :is-scroll="false"
        :current="current"
        bg-color="#101334"
        active-color="#fff"
        inactive-color="aliceblue"
        height="100"
        @change="change"
      ></u-tabs>
    </view>
    <swiper
      id="swiperBox"
      :style="{ height: swiperHeight + 'px' }"
      :current="current"
      @change="tabsChange"
    >
      <swiper-item
        class="swiper-item"
        v-for="(pitem, pindex) in tabs"
        :key="pindex"
      >
        <scroll-view scroll-y style="width: 100%; height: 100%">
          <view class="content" v-if="current == 0">
            <view class="list">
              <view class="head">
                <text>账号</text>
                <text>VIP等级</text>
                <text>注册日期</text>
              </view>
              <view class="item" v-for="i in 10" :key="i">
                <text>wangge</text>
                <text>VIP1</text>
                <text>2021-08-01</text>
              </view>
            </view>
          </view>
          <view class="content" v-if="current == 1">
            <view class="list">
              <view class="head">
                <text>好友账号</text>
                <text>奖励积分</text>
                <text>充值时间</text>
              </view>
              <view class="item" v-for="i in 10" :key="i">
                <text>wangge</text>
                <text>300</text>
                <text>2021-08-01</text>
              </view>
            </view>
          </view>
          <view class="content" v-if="current == 2">
			<view class="item-strategy">
				<view class="summary">
					<view class="summary-title row">
					<text>总计提现</text>
					<text>剩余</text>
					<text>待审核</text>
					</view>
					<view class="summary-content row">
					<text>3289</text>
					<text>443</text>
					<text>30</text>
					</view>
				</view>
			</view>  
            <view class="list">
              <view class="head">
                <text>单号</text>
                <text>金额</text>
                <text>状态</text>
                <text>时间</text>
              </view>
              <view class="item" v-for="i in 10" :key="i">
                <text>u20210201</text>
                <text>300USTD</text>
                <text>审核中</text>
                <text>2021-08-01</text>
              </view>
            </view>

			<!-- 提现规则 -->
			<view class="rule">
				<text class="title"> 提现规则</text>
				<view class="content">
					<text>1. 账户提现金额必须为50usdt倍数,申请提现必须为软件付费会员</text>
					<text>2. 提现时间任意，提现申请每月13-15审核处理</text>
					<text>3. 提现规则最终解释权归YD量化官方所有</text>
				</view>
			</view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";

export default {
  computed: { ...mapState(["member", "msg"]) },
  components: { tkiQrcode },
  data() {
    return {
      downurl: "https://gitee.com/",
      id: "admkvmavj2314",
      // tab
      swiperHeight: 0,
      tabs: [
        {
          name: "邀请明细",
          triggered: false,
          _triggered: false,
        },
        {
          name: "奖励明细",
          triggered: false,
          _triggered: false,
        },
        {
          name: "提现明细",
          triggered: false,
          _triggered: false,
        },
      ],
      current: 2,
    };
  },
  mounted() {
    this.initInfo();
  },
  onLoad() {},
  onReady() {
    let that = this;
    uni.getSystemInfo({
      success(e) {
        let { windowWidth, windowHeight, safeArea } = e;
        const query = uni.createSelectorQuery().in(that);
        query
          .select("#swiperBox")
          .boundingClientRect((data) => {
            that.swiperHeight = safeArea.bottom - data.top;
          })
          .exec();
      },
    });
  },
  methods: {
    // tab 切换
    tabsChange(e) {
      this.current = e.detail.current;
    },

    change(index) {
      this.current = index;
    },
    initInfo() {},
    copyKefu() {
      var that = this;
      uni.setClipboardData({
        data: that.downurl,
        success: function () {
          uni.showToast({ title: "已复制", duration: 3000 });
        },
      });
    },
    copyId() {
      var that = this;
      uni.setClipboardData({
        data: that.id,
        success: function () {
          uni.showToast({ title: "已复制", duration: 3000 });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/line.scss";
.container {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #101334;
  font-size: 24rpx;
  color: aliceblue;
  .gap {
    /* width: 90vw;
	  display: flex;
	  justify-content: center; */
    margin: 20rpx 5rpx;
  }
  .rule {
	  display: flex;
	  flex-direction: column;
	  padding: 0 20rpx;
	  margin-top:  -80rpx;
	  .title {
		  font-family: 'Microsoft YaHei';
		  color: #ff9900;
		  margin-bottom: 10rpx;
	  }
	  .content {
		  display: flex;
		  flex-direction: column;
		  color: #696c89;
		  padding: 10rpx;
		  text{
			  margin-bottom: 10rpx;
		  }
	  }
  }
}
// 邀请
.qrimg {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 10rpx;
}
.tki-qrcode {
}
.row-btns {
  display: flex;

  flex-direction: row;
  justify-content: space-around;
}
.myid {
  margin-bottom: 20rpx;
  text-align: center;
}
</style>